<template>
  <div id="myCanvas" class="design-canvas-box" :style="canvasStyle">
    <div class="design-mask">
      <div class="mask-tips">
        标签尺寸: {{ canvasForm.width }}mm * {{ canvasForm.height }}-{{ elements.length }}--mm
      </div>
    </div>
    <div id="aaa" :key="boxKey" class="design-canvas">
      <Element
        v-for="(el, index) in elements"
        :id="'el' + index"
        :key="'elaa' + index + '_' + elKey"
        :data-index="index"
        :class="`${activeIndex === index ? 'active' : ''} ${el.type}`"
        :info="el"
        @del="del(index)"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import { Modal } from 'ant-design-vue'
import Moveable from 'moveable'
import { ref, onMounted, nextTick, computed } from 'vue'
import Element from './Element.vue'
import { ptToPx } from './mm2px'

const emits = defineEmits(['update:elementIndex', 'syncElData'])
const props = defineProps<{
  canvasForm: any
  elements: any[]
}>()

const activeIndex = ref(-1)
const myMoveable = ref()
const boxKey = ref(new Date().getTime())
const pxToPt = (num) => ptToPx(num, 'px')

onMounted(() => {
  nextTick(() => {
    initMoveable()
  })
})

const elKey = ref(new Date().getTime())
function del(index) {
  Modal.confirm({
    title: '',
    content: '是否确认删除该元素?',
    okText: '确认',
    cancelText: '取消',
    onOk() {
      props.elements.splice(index, 1)
      setCheckNull()
    }
  })
}

function setCheckNull() {
  emits('update:elementIndex', null)
  activeIndex.value = -1
  myMoveable.value.target = null
  elKey.value = new Date().getTime()
}

let moveElmenet: HTMLElement | null = null

function dragFn(data) {
  data.target.style.transform = data.transform
}
function dragEndFn(data) {
  if (!data.isDrag) {
    return
  }
  const { beforeTranslate } = data.lastEvent
  emits('syncElData', {
    left: pxToPt(beforeTranslate[0]),
    top: pxToPt(beforeTranslate[1])
  })
}

function resizeFn(data) {
  const { target, width, height, drag } = data
  target.style.width = `${width}px`
  target.style.height = `${height}px`
  target.style.transform = drag.transform
}
function resizeEndFn(data) {
  if (!data.isDrag) {
    return
  }
  const { width, height, beforeTranslate } = data.lastEvent.drag
  emits('syncElData', {
    width: pxToPt(width),
    height: pxToPt(height),
    left: pxToPt(beforeTranslate[0]),
    top: pxToPt(beforeTranslate[1])
  })
}

function initMoveable() {
  moveElmenet = document.getElementById('aaa')
  if (!moveElmenet) {
    return false
  }
  myMoveable.value = new Moveable(moveElmenet, {
    snappable: true,
    draggable: true,
    resizable: true,
    origin: false
  })

  myMoveable.value.on('drag', dragFn)
  myMoveable.value.on('dragEnd', dragEndFn)
  myMoveable.value.on('resize', resizeFn)
  myMoveable.value.on('resizeEnd', resizeEndFn)

  moveElmenet.addEventListener('mousedown', (e) => {
    let target: any = e.target
    if (!target || typeof target.className === 'object') {
      return
    }
    if (target.className.indexOf('design-canvas') !== -1) {
      emits('update:elementIndex', null)
      activeIndex.value = -1
      myMoveable.value.target = null
      return
    }
    target = target.parentNode
    if (!target || typeof target.className === 'object') {
      return
    }
    if (!target.className.includes('moveable-el')) {
      return
    }
    emits('update:elementIndex', Number(target.dataset.index))
    activeIndex.value = Number(target.dataset.index)
    myMoveable.value.target = target
    myMoveable.value.dragStart(e)
  })
}

const canvasStyle = computed(() => {
  const { width, height } = props.canvasForm
  return {
    width: width * 2 + 'mm',
    height: height * 2 + 'mm'
  }
})

function upDateMoveable() {
  myMoveable.value.updateRect()
}

defineExpose({
  upDateMoveable,
  setCheckNull
})
</script>
